/**
 * 学习目标：react中实现列表渲染 - 数组渲染，类似 v-for
 */
import React from 'react';
import ReactDOM from 'react-dom';

const list = ['香蕉', '苹果', '雪梨'];

const divNode = (
  <>
    {list}
    {/* 使用 map 循环数组，不要用foreach，因为没有返回值 */}
    {/* key的作用和vue 一模一样，提供 复用的策略 */}
    {/* key口诀：有id用id，没id 采用索引 */}
    <ul>
      {list.map((item) => {
        return <li key={item}>{item}</li>;
      })}
    </ul>
  </>
);

ReactDOM.render(divNode, document.getElementById('root'));
